<template>
    <div class="shucaishebeijilubox">
        <!-- 设备数采最新记录 -->
        <ul class="jiLvBox" v-if="dataType == '最新'">
            <li class="jiLvBoxHedaer" style="padding: 0 10px;box-sizing: border-box;" v-if="sheBeiZuiXinJi.length > 0">
                <span>编号</span>
                <span>采集时间</span>
                <span>状态</span>
            </li>
            <li class="kongde" v-else>
                暂无数据
            </li>
            <li class="jiLvBoxContent" style="padding: 0 10px;box-sizing: border-box;"
                v-for="(items, index) in sheBeiZuiXinJi" :class="[geHangBianSe(index)]" :key="index">
                <span>{{ items.编号 }}</span>
                <span>{{ items.采集时间 | datesss }}</span>
                <span :class="[zhuangTaiStye(items.状态)]">{{ items.状态 }}</span>
            </li>
        </ul>
        <!-- 设备今日运行占比数据 -->
        <ul class="jiLvBox yunxingzhanbi" v-if="dataType == '今日运行'">
            <li class="jiLvBoxHedaer " v-if="jinRiYunXingZhanBi.length > 0">
                <span>编号</span>
                <span>当前状态</span>
                <span>名称</span>
                <span>运行时长</span>
                <span>开机时长</span>
                <span>运行占比</span>
            </li>
            <li class="kongde" v-else>
                暂无数据
            </li>
            <li class="jiLvBoxContent jinriyungxinf" v-for="(items, index) in jinRiYunXingZhanBi"
                :class="[geHangBianSe(index)]" :key="index">
                <div class="vfsdre" :class="[zhuangTaiStye(items.当前状态)]">
                    <span>{{ items.dimension1 }}</span>
                    <span>{{ items.当前状态 }}</span>
                    <span>{{ items.名称 }}</span>
                    <span>{{ items.运行时长 }}</span>
                    <span>{{ items.开机时长 }}</span>
                    <span>{{ zhanbi(items.运行占比) }}%</span>
                </div>
            </li>
        </ul>
        <!-- 设备过去7天运行占比数据 -->
        <ul class="jiLvBox" v-if="dataType == '过去7天'">
            <li class="jiLvBoxHedaer" style="padding: 0 10px;box-sizing: border-box;"
                v-if="guiQuQiTianYunXingZhanBi.length > 0">
                <span>编号</span>
                <span style="padding-right: 18px;box-sizing: border-box;">运行时长</span>
                <span>开机时长</span>
                <span>运行占比</span>
            </li>
            <li class="kongde" v-else>
                暂无数据
            </li>
            <li style="padding:0 12px;box-sizing: border-box;" class="jiLvBoxContent"
                v-for="(items, index) in guiQuQiTianYunXingZhanBi" :class="[geHangBianSe(index)]" :key="index">
                <div class="vfsdre">
                    <span>{{ items.dimension1 }}</span>
                    <span>{{ items.运行时长 }}</span>
                    <span>{{ items.开机时长 }}</span>
                    <span :class="[guoQiQiTian(items.运行占比)]">{{ zhanbi(items.运行占比) }}%</span>
                </div>
            </li>
        </ul>
        <!-- 设备本月运行占比数据 -->
        <ul class="jiLvBox" v-if="dataType == '本月运行'">
            <li class="jiLvBoxHedaer" style="padding:0 12px;box-sizing: border-box;"
                v-if="BenYueTianYunXingZhanBi.length > 0">
                <span>编号</span>
                <span>运行(时)</span>
                <span>开机(时)</span>
                <span>运行占比</span>
            </li>
            <li class="kongde" v-else>
                暂无数据
            </li>
            <li class="jiLvBoxContent" style="padding:0 12px;box-sizing: border-box;"
                v-for="(items, index) in BenYueTianYunXingZhanBi" :class="[geHangBianSe(index)]" :key="index">
                <span>{{ items.dimension1 }}</span>
                <span>{{ xiaposghu(items.运行) }}</span>
                <span>{{ xiaposghu(items.开机) }}</span>
                <span :class="[guoQiQiTian(items.运行占比)]">{{ zhanbi(items.运行占比) }}%</span>
            </li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    props: {
        dataType: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            sheBeiZuiXinJi: [],
            jinRiYunXingZhanBi: [],
            guiQuQiTianYunXingZhanBi: [],
            BenYueTianYunXingZhanBi: []
        }
    },
    filters: {
        // 时间过滤器
        datesss: function (originVal) {
            const dt = new Date(originVal)
            const y = dt.getFullYear()
            const m = (dt.getMonth() + 1 + '').padStart(2, '0')
            const d = (dt.getDate() + '').padStart(2, '0')
            const hh = (dt.getHours() + '').padStart(2, '0')
            const mm = (dt.getMinutes() + '').padStart(2, '0')
            const ss = (dt.getSeconds() + '').padStart(2, '0')
            return `${y}-${m}-${d} ${hh}:${mm}`
        }
    },
    created() {
        this.getYiRiYunXingZhanBi()
        this.getGuoQuQiTian()
        this.getBeiYueTian()
        this.getZuiXinJiLuList()
    },
    methods: {
        querys() {
            var thats = this
            // 每隔3分钟就刷新一次接口
            setInterval(() => {
                thats.getYiRiYunXingZhanBi()
                thats.getGuoQuQiTian()
                thats.getBeiYueTian()
                thats.getZuiXinJiLuList()
            }, 180000)
        },
        // 实现隔行变色的方法
        geHangBianSe(val) {
            if (val % 2 == 0) {
                // 奇数样式
                return "ouShuSytle";

            } else {
                // 偶数样式
                return "jiShuSytle";

            }
        },
        zhuangTaiStye(val) {
            var color = ''
            if (val == '待机') {
                color = 'dj'
            } else if (val == '故障') {
                color = 'guzhang'
            }
            else if (val == '运行') {
                color = 'yunxingw'
            }
            else if (val == '停机') {
                color = 'jinrushebeitingji'
            }
            return color
        },
        guoQiQiTian(val) {
            var color = ''
            let dsf = (val * 100).toFixed(0)
            if (dsf >= 50) {
                color = 'yunxingw'
            }
            return color
        },
        zhanbi(val) {
            return (val * 100).toFixed(1)
        },
        // 处理小数
        xiaposghu(val) {
            return val.toFixed(1)
        },

        // 请求接口，获取设备今日运行占比数据
        getGuoQuQiTian() {
            axios({
                method: "get",
                url: `${window.location.origin}/apigateway/api/widget/1660489048715538433`,
                headers: {
                    apiKey: "a92a7db58b234595951bb2b39fcf6430",
                },
            }).then((res) => {

                this.jinRiYunXingZhanBi = res.data.data;
            });
        },
        // 请求接口，获取设备过去7天运行占比数据
        getYiRiYunXingZhanBi() {
            axios({
                method: "get",
                url: `${window.location.origin}/apigateway/api/widget/1686941261741223938`,
                headers: {
                    apiKey: "a92a7db58b234595951bb2b39fcf6430",
                },
            }).then((res) => {
                this.guiQuQiTianYunXingZhanBi = res.data.data;
            });
        },

        // 请求接口，获取设备本月运行占比数据
        getBeiYueTian() {
            axios({
                method: "get",
                url: `${window.location.origin}/apigateway/api/widget/1686978963794620418`,
                headers: {
                    apiKey: "a92a7db58b234595951bb2b39fcf6430",
                },
            }).then((res) => {
                this.BenYueTianYunXingZhanBi = res.data.data;
            });
        },
        // 请求接口，获取设备数采最新记录数据
        getZuiXinJiLuList() {
            axios({
                method: "get",
                url: `${window.location.origin}/apigateway/api/widget/1660523114512887809`,
                headers: {
                    apiKey: "a92a7db58b234595951bb2b39fcf6430",
                },
            }).then((res) => {
                this.sheBeiZuiXinJi = res.data.data;
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.shucaishebeijilubox {
    width: 100%;
    // height: 100%;
}

.jiLvBox {
    width: 100%;
    height: 100%;
}

.jiLvBoxHedaer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 45px;
    // background-color: cadetblue;
    background-color: #004491;
    //   background-color: #004491;
    padding: 0 5px;
    box-sizing: border-box;
    // color: antiquewhite;
    font-size: 20px;
    font-family: Segoe UI Variable-Semibold Display, Segoe UI Variable;
    font-weight: normal;
    color: #ffffff;
}

.jiLvBoxContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 45px;
    width: 100%;
    // padding: 0 5px;
    box-sizing: border-box;
    // color: antiquewhite;
    font-size: 18px;
    font-family: Segoe UI Variable-Semibold Display, Segoe UI Variable;
    font-weight: normal;
    color: #ffffff;
}

.jiLvBoxContent span {
    text-align: center;
}

.jiShuSytle {
    font-size: 18px;
    font-family: Segoe UI Variable-Regular, Segoe UI Variable;
    font-weight: 400;
    color: #ffffff;
    background: #004491;
}

.ouShuSytle {
    font-size: 18px;
    font-family: Segoe UI Variable-Regular, Segoe UI Variable;
    font-weight: 400;
    color: #ffffff;
    background: #0265dc;
}

// 单独设置设备今日运行占比数据

.yunxingzhanbi .jiLvBoxHedaer span:nth-child(1) {
    width: 6%;
    text-align: center;
}

.jinriyungxinf span:nth-child(1) {
    width: 5%;
}

.yunxingzhanbi .jiLvBoxHedaer span:nth-child(2) {
    width: 10%;


}

.jinriyungxinf span:nth-child(2) {
    width: 10%;
    padding-left: 20px;
    box-sizing: border-box;
}

.yunxingzhanbi .jiLvBoxHedaer span:nth-child(3) {
    width: 28%;
    text-align: center;
    padding-right: 50px;
    box-sizing: border-box;
    // background-color: aquamarine;
}

.jinriyungxinf span:nth-child(3) {
    width: 28%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.yunxingzhanbi .jiLvBoxHedaer span:nth-child(4) {
    width: 10%;
    text-align: center;
    padding-right: 10px;
    box-sizing: border-box;
}

.jinriyungxinf span:nth-child(4) {
    width: 15%;
}

.yunxingzhanbi .jiLvBoxHedaer span:nth-child(5) {
    width: 15%;
    text-align: center;
    padding-left: 15px;
    box-sizing: border-box;
}

.jinriyungxinf span:nth-child(5) {
    width: 15%;
}

.yunxingzhanbi .jiLvBoxHedaer span:nth-child(6) {
    width: 10%;
    text-align: center;

}

.jinriyungxinf span:nth-child(6) {
    width: 10%;
}

.vfsdre {
    // background-color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 45px;
    width: 100%;
    // padding: 0 5px;
    box-sizing: border-box;
    // color: antiquewhite;
    font-size: 18px;
    font-family: Segoe UI Variable-Semibold Display, Segoe UI Variable;
    font-weight: normal;
    color: #ffffff;
}

.jinrushebeitingji {
    color: #f55828;
}

.yunxingw {
    color: #5FE8A1;
}

.guzhang {
    color: #f50c1b;
}

.dj {
    color: #F9C97B;
}

.kongde {
    width: 100%;
    height: 420px;
    line-height: 420px;
    text-align: center;
    // background-color: #fff;
    color: aliceblue;
}
</style>